<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>月下仙连 - 联系我</title>
    <link href="css/style.css" rel="stylesheet">
    <link href="css/contactMe.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="js/darkmode.js"></script>
    <script src="js/dailyLife.js"></script>
</head>
<body>
<!-- 导航 -->
<header class="header">
    <div class="logo">
        <h3>月下仙连的个人网页</h3>
    </div>
    <nav class="nav">
        <a href="index.html"><i class="fas fa-home"></i> 首页</a>
        <a href="about.html"><i class="fas fa-user"></i> 个人介绍</a>
        <a href="offering.html"><i class="fas fa-briefcase"></i> 个人作品</a>
        <a href="dailyLife.html"><i class="fas fa-camera"></i> 日常生活</a>
        <a class="active" href="contactMe.html"><i class="fas fa-envelope"></i> 联系我</a>
        <button class="mode-toggle" onclick="toggleDarkMode()">
            <i class="fas fa-moon"></i>
        </button>
    </nav>
</header>

<!-- 内容区域 -->
<div class="snow-container">
    <main class="about">
        <h3 class="about-title"><i class="fas fa-envelope"></i> 联系我</h3>
        <!-- 这里可以添加联系表单或信息 -->
        <form class="contact-form" id="contactForm">
            <div class="form-group">
                <label for="name">姓名:</label>
                <input id="name" name="name" required type="text"/>
            </div>

            <div class="form-group">
                <label for="phone">电话:</label>
                <input id="phone" name="phone" pattern="\d{11}" required title="请输入11位手机号码" type="tel"/>
            </div>

            <div class="form-group">
                <label for="email">邮箱:</label>
                <input id="email" name="email" required type="email"/>
            </div>

            <div class="form-group">
                <label for="message">留言内容:</label>
                <textarea id="message" name="message" required rows="5"></textarea>
            </div>

            <button type="submit">提交</button>
            <p class="success-message" id="successMessage"></p>
        </form>
    </main>
</div>
</div>


<!-- 底部 -->
<footer class="footer">
    <p>Copyright © 2020-
        <script>document.write(new Date().getFullYear())</script>
        月下仙连. All rights reserved.
    </p>
</footer>
</body>
</html>
